<template>
<!-- 这个组件是一个公用的提示组件 -->
<!-- 这种自动消失，没有可以操作的提示框，习惯叫 toast -->
 <div class="toast" :class="toastType">
     <!-- 这个组件，仅仅是用于提示成功、失败、警告的，图标可以写死 -->
     <i class="iconfont" :class="$store.state.toastIcon"></i><span>{{$store.state.toastMsg}}</span>
 </div>
</template>
 
<script>
export default {
 data () {
 return {

 }
 },
 computed:{
    toastType(){
        let type = 'success'
        switch(this.$store.state.toastIcon){
            case 'icon-toast-shibai_huaban':
                type = 'dander'
                break;
            case 'icon-toast-jinggao':
                type = 'warning'
                break;
        }
        return type
    }
 }
}
</script>
 
<style lang = "less" scoped>
.toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    .iconfont {
        margin-right: 20px;
    }
    &.success {
        background-color: rgb(50, 252, 90);
        color: rgb(35, 174, 0);
    }
    &.dander {
        background-color: rgb(248, 69, 69);
        color: rgb(201, 17, 17);
    }
     &.warning {
        background-color: #f0ad4e;
        color: rgb(245, 245, 245);
    }
}
</style>